<template>
  <div>
    <!--首页轮播图-->
    <Carousel />
    <!--首页搜索医院的表单区域-->
    <Search />
    <!--底部展示医院的结构-->
    <el-row :gutter="20">
      <el-col :span="20">
        <!--等级子组件-->
        <Level @getLevel="getLevel" />
        <!--地区子组件-->
        <Region @getRegion="getRegion" />
        <div class="hospital" v-if="hasHospitalArr.length">
          <Card class="item" v-for="(item, index) in hasHospitalArr" :key="index" :itemInfo="item" />
        </div>
        <el-empty v-else description="暂无数据" />
        <el-pagination
            :current-page="pageNo"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper, ->, sizes, total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>

    <canvas v-if="false" id="main" width="500" height="500"></canvas>
    <canvas v-if="false" id="main1" width="500" height="500"></canvas>
  </div>
</template>

<script setup lang="ts">
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Region from './region/index.vue'
import Card from './card/index.vue'
import Tip from './tip/index.vue'
import {onMounted, ref} from "vue";
import { reqHospital } from "@/api/home";
import type {Content, HospitalResponseData} from "@/api/home/type";

let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(15)
let hasHospitalArr = ref<Content>([])
// 医院等级
let hostype = ref<string>('')
// 医院的地区
let districtCode = ref<string>('')

onMounted(() => {
  getHospitalInfo()
  initCanvas()
})

const handleSizeChange = (data) => {
  // pageSize.value = data
  getHospitalInfo()
}
const handleCurrentChange = (data) => {
  // pageNo.value = data
  getHospitalInfo()
}
/**
 * 子组件传递的医院等级
 * @param data
 */
const getLevel = (data: string) => {
  hostype.value = data
  getHospitalInfo()
}
/**
 * 子组件传递的医院地区
 * @param data
 */
const getRegion = (data: string) => {
  districtCode.value = data
  getHospitalInfo()
}
const getHospitalInfo = async () => {
  const result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
  if (result.code === 200) {
    hasHospitalArr.value = result.data.content
    total.value = result.data.totalElements
  }
}

const initCanvas = () => {
  const canvasId = document.getElementById('main')
  const canvasId1 = document.getElementById('main1')
  if (canvasId && canvasId.getContext) {
    const context = canvasId.getContext('2d')
    const context1 = canvasId1.getContext('2d')
    // context.fillStyle = 'purple'
    // context.fillRect(10, 10, 125, 125)
    //
    // context.fillRect(100, 100, 100, 100)
    // context.clearRect(112.5, 112.5, 75, 75)
    // context.strokeRect(125, 125, 50, 50)
    context.beginPath()
    context.moveTo(350, 50)
    context.lineTo(375, 75)
    context.lineTo(375, 25)
    context.fill()

    context.beginPath()
    context.moveTo(0, 0)
    context.lineTo(100, 0)
    context.lineTo(100, 100)
    context.lineTo(125, 125)
    context.lineTo(125, 150)
    context.lineTo(150, 150)
    context.lineTo(150, 175)
    context.lineTo(175, 175)
    context.lineTo(175, 300)
    context.closePath()
    context.stroke()

    context1.beginPath()
    context1.moveTo(550, 50)
    context1.lineTo(575, 75)
    context1.lineTo(575, 25)
    context1.fillStyle = 'pink'
    context1.fill()

    context1.beginPath()
    context1.moveTo(0, 0)
    context1.lineTo(100, 0)
    context1.lineTo(100, 10)
    context1.lineTo(110, 10)
    context1.lineTo(120, 0)
    context1.lineTo(420, 0)
    context1.lineTo(420, 190)
    // context1.lineTo(420, 200)
    // context1.lineTo(419, 201)
    // context1.lineTo(418, 202)
    // context1.lineTo(417, 203)
    // context1.lineTo(416, 204)
    // context1.lineTo(415, 205)
    context1.arc(410, 190, 10, 0, Math.PI / 2, false)
    // context1.lineTo(125, 125)
    // context1.lineTo(125, 150)
    // context1.lineTo(150, 150)
    // context1.lineTo(150, 175)
    // context1.lineTo(175, 175)
    // context1.lineTo(175, 300)
    context1.lineTo(120, 200)
    context1.arc(110, 190, 10, 90, Math.PI, false)
    context1.lineTo(120, 30)
    context1.lineTo(110, 20)
    context1.lineTo(100, 20)
    context1.lineTo(100, 30)
    context1.lineTo(0, 30)
    context1.fillStyle = 'red'
    context1.closePath()
    context1.stroke()
  }
}

</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>
